<script setup lang="ts">
import { useSearch } from '@/composables/search'
import { fetchGeneralDataAPI } from '@/apis/fetchGeneralData'

const router = useRouter()
const { searchText, searchResult, fetchSearchResult } = useSearch<Project>(search as any, { dataKeyName: 'server_project' })

async function search() {
  const res = await fetchGeneralDataAPI(searchText.value)
  return res.data!
}

onLoad((options) => {
  if (options && options.keyword) {
    searchText.value = options.keyword
    fetchSearchResult()
  }
})

function handleTapProjectCard(id: string) {
  router.push({
    name: 'projectDetail',
    params: { id },
  })
}
</script>

<template>
  <view class="sticky left-0 top-0 py-4">
    <uv-search
      v-model="searchText"
      shape="round" bg-color="#FFFFFF" color="#333333" search-icon-size="48rpx"
      search-icon-color="#9A9A9A" placeholder-color="#999999" :show-action="false"
      height="58rpx" placeholder="请输入服务项目"
    >
      <template #suffix>
        <button
          class="h-52rpx w-106rpx flex items-center justify-center rounded-full from-#77DAFE to-#4999F7 bg-gradient-to-l text-30rpx text-white font-medium"
          @tap="fetchSearchResult"
        >
          搜索
        </button>
      </template>
    </uv-search>
  </view>
  <view v-if="searchResult.length > 0">
    <ProjectItem
      v-for="item in searchResult"
      :key="item.id"
      :picture="item.image"
      :title="item.title"
      :price="item.price"
      @tap="handleTapProjectCard(item.id.toString())"
    />
    <Spacer height="80" />
  </view>
  <PageDefault v-else>
    暂无服务项目
  </PageDefault>
</template>

<route lang="yaml">
name: 'searchResult'
style:
  navigationBarTitleText: '搜索结果'
</route>
